<template>
  <div class="use_packet">
    <div class="header">
      <div class="left" @click="goBack">
        <img src="@/assets/images/pubilc/btn_back.png" alt="">
      </div>
      <div class="title">密马红包</div>
      <div class="right"></div>
    </div>
    <div class="price"></div>
    <div class="content">
      <div class="usable">
        <div class="title">
          可用红包（{{ valid.length }}张）
        </div>
        <ul v-if="valid.length != 0">
          <li v-for="(item, index) in valid" :key="index" @click="chioceOther(index, item.user_envelope_id, item.envelopes.reduce_num)">
            <div class="packetBox">
              <div class="left">
                <div class="pirce"><span>￥</span>{{ item.envelopes.reduce_num }}</div>
                <div class="doc">满{{ item.envelopes.condition_num }}元使用</div>
              </div>
              <div class="r_info">
                <div class="s_a">
                  <div class="center">
                    <div> <p>{{ item.envelopes.user_type_limit === 1 ? '新人券' : '平台券' }}</p> <span v-if="item.envelopes.type === 0">全场通用</span><span v-else v-for="(it, ind) in item.envelopes.use_category" :key="ind">仅限{{ it }}类商品使用</span> </div>
                    <!-- <div v-if="item.envelopes.type === 0">全平台通用红包</div> -->
                    <!-- <div v-else><span v-for="(it, ind) in item.envelopes.use_category" :key="ind">仅限{{ it }}使用</span></div> -->
                    <div>有效期至 {{ item.envelopes.use_end_time }}</div>
                  </div>
                  <div class="right">
                    <div class="chioce " :class="{active: currInd === index}">
                      <img src="@/assets/images/pubilc/dui.png" alt="" v-if="currInd === index">
                    </div>
                  </div>
                </div>
                <div class="rule_detail" @click.stop="lookMore(1, index)" >
                  <div>查看详细规则</div>
                  <img v-if="list.indexOf(index) === -1" src="@/assets/images/pubilc/ico_up.png" alt="">
                  <img v-else src="@/assets/images/pubilc/ico_down.png" alt="">
                </div>
              </div>
            </div>
            <div class="detailInfo" v-if="list.indexOf(index) != -1">
              <p>限制条件：<span v-if="item.envelopes.type === 0">全场通用</span>
              <span v-else v-for="(it, ind) in item.envelopes.use_category" :key="ind">仅限{{ it }}使用，</span>
              {{ item.envelopes.use_start_time ? ' 开始使用时间' + item.envelopes.use_start_time + '，' : ''}}
              满{{ item.envelopes.condition_num }}可用， 单笔订单使用1张，每张券限用1次</p>
            </div>
          </li>
        </ul>
        <div v-else class="nomore">暂无可用红包</div>
      </div>
      <div class="unusable">
        <div class="title">
          不可用红包（{{ invalid.length }}张）
        </div>
        <ul v-if="invalid.length != 0">
          <li v-for="(item, index) in invalid" :key="index">
            <div class="packetBox">
              <div class="left">
                <div class="pirce" style="color: #979797"><span>￥</span>{{ item.envelopes.reduce_num }}</div>
                <div class="doc" style="color: #979797">满{{ item.envelopes.condition_num }}元使用</div>
              </div>
              <div class="r_info">
                <div class="s_a">
                  <div class="center">
                    <div><p class="quan">{{ item.user_type_limit === 1 ? '新人券' : '平台券' }}</p><span v-if="item.envelopes.type === 0">全场通用</span><span v-else v-for="(it, ind) in item.envelopes.use_category" :key="ind">仅限{{ it }}使用</span></div>
                    <!-- <div v-if="item.envelopes.type === 0">全平台通用红包</div> -->
                    <!-- <div v-else><span v-for="(it, ind) in item.envelopes.use_category" :key="ind">仅限{{ it }}使用</span></div> -->
                    <div>有效期至 {{ item.envelopes.use_end_time }}</div>
                  </div>
                  <div class="right">
                    <div class="chioce">
                      <!-- <img src="@/assets/images/pubilc/dui.png" alt=""> -->
                    </div>
                  </div>
                </div>
                <div class="rule_detail" @click.stop="lookMore(0, index)" >
                  <div>查看详细规则</div>
                  <img v-if="unList.indexOf(index) == -1" src="@/assets/images/pubilc/ico_up.png" alt="">
                  <img v-else src="@/assets/images/pubilc/ico_down.png" alt="">
                </div>
              </div>
            </div>
            <div class="detailInfo" v-if="unList.indexOf(index) != -1">
              <p>限制条件：<span v-if="item.envelopes.type === 0">全场通用</span>
              <span v-else v-for="(it, ind) in item.envelopes.use_category" :key="ind">仅限{{ it }}使用，</span>
              {{ item.envelopes.use_start_time ? ' 开始使用时间' + item.envelopes.use_start_time + '，' : ''}}
              满{{ item.envelopes.condition_num }}可用， 单笔订单使用1张，每张券限用1次</p>
            </div>
          </li>
        </ul>
        <div v-else class="nomore">暂无不可用红包</div>
      </div>
    </div>
    <div class="shopp"></div>
    <div class="footer">
      <div class="left">
        已选择{{ chioce ? '1' : '0' }}张，可减<span>¥</span><span>{{ chioce ? pirce : '0' }}</span>
      </div>
      <div class="right">
        <van-button color="#FFDD07" class="submit" @click="submit">确定</van-button>
      </div>
    </div>
  </div>
</template>


<script>
import store from "../../store";
import { confirmOrder } from '@/api/index'
export default {
  data () {
    return {
      all_envelope: {},
      param: {},
      valid: [],
      invalid: [],
      currInd: null,
      pirce: null,
      id: store.state.user_envelope_id,
      chioce: true,
      detailRule: false,
      list: [],
      unList: []
    }
  },
  deactivated () { //清除keep-alive的缓存
    this.$destroy(true)
  },
  created () {
    this.all_envelope = this.$store.state.all_envelope
    this.$store.dispatch('async_change_all_envelope', this.all_envelope)
    this.getData()
  },
  beforeRouteEnter (to, from, next) {
    from.meta.keepAlive = true
    next()
  },
  beforeRouteLeave (to, from, next) {
    to.meta.keepAlive = true
		next()
	},
  methods: {
    chioceOther (index, id, pirce) {
      if (index === this.currInd) {
        this.currInd = -1
        this.chioce = false
        this.id = -1
      } else {
        this.chioce = true
        this.currInd = index
        this.pirce = pirce
        this.id = id

      }
    },
    lookMore (i, index) {
      this.detailRule = !this.detailRule
      if (i) {
        if (this.list.indexOf(index) === -1) {
          this.list.push(index)
        } else {
          this.list.splice(this.list.indexOf(index), 1)
        }

      } else {
        if (this.unList.indexOf(index) === -1) {
          this.unList.push(index)
        } else {
          this.unList.splice(this.unList.indexOf(index), 1)
        }
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    submit () {
      this.$store.dispatch('async_change_user_envelope_id', this.id)
      this.$router.go(-1)
    },
    getData () {
      this.valid = this.all_envelope.valid
      this.invalid = this.all_envelope.invalid
      if (this.valid !== 0) {
        this.valid.forEach((item, index) => {
          item.envelopes.reduce_num = Number(item.envelopes.reduce_num)
          if (item.selected) {
            this.currInd = index
            this.pirce = item.envelopes.reduce_num
          }
        })
      }
      this.currInd === null || this.currInd === -1 ? this.chioce = false : ''
      if (this.invalid !== 0) {
        this.invalid.forEach(item => {
          item.envelopes.reduce_num = Number(item.envelopes.reduce_num)
        })
      }
      // console.log(this.valid)
    },
  }
}
</script>

<style lang="scss" scoped>
.use_packet {
  height: 100vh;
  width: 100%;
  background: #F5F5F5;
  font-family: PingFang SC;
  // overflow-y: scroll;
}
.nomore{
  text-align: center;
  color: #999999;
  font-size: 14px;
}
.header {
  max-width: 10rem;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  height: 46px;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  .left {
    width: 60px;
    img {
      width: 16px;
      height: 16px;
      margin-bottom: -4px;

    }
  }
  .title {
    font-size: 15px;
    line-height: 46px;
    // text-indent: 0.3px;
  }
  .right {
    font-size: 13px;
    width: 60px;
    text-align: right;
    line-height: 46px;
  }
}
.price{
  height: 45px;
}
.content {
  padding: 0px 12px;
  box-sizing: border-box;
}
.usable {
  .title {
    font-size: 14px;
    font-weight: 600;
    margin: 17px 3px 15px;
  }
}
  ul {

    li {
      margin-bottom: 10px;
      .packetBox {
        background: #ffffff;
        display: flex;
        width: 100%;
        height: 101px;
        justify-content: space-between;
        border-radius: 5px;
        // padding: 15px 18px;
        box-sizing: border-box;
        align-items: center;
        box-shadow:0px 4px 8px 0px rgba(201,201,201,0.22);
        position: relative;
        z-index: 1;
        .left {
          width: 99px;
          height: 87px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          // padding-right: 24px;
          box-sizing: border-box;
          // border-right:1px dashed rgba(224,224,224,1);
          border-right: 1px dashed transparent;
          background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg,rgba(224,224,224,1) 0, rgba(224,224,224,1) 4px,white 0,white 7.8px);
          .pirce {
            font-size: 30px;
            line-height: 30px;
            color: #FF0800;
            font-weight: 600;
            span {
              font-size: 13px;
            }
          }
          .doc {
            font-size: 11px;
            color: #FF0800;
          }
        }
        .r_info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .s_a {
            display: flex;
            padding: 18px 16px 16px 16px;
            box-sizing: border-box;
            height: 73px;
            border-bottom: 0.5px solid rgba(245,245,245,1);
          }
          .rule_detail {
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px 0 18px;
            font-size: 10px;
            color: #999999;
            img {
              width: 14px;
              height: 14px;
            }
          }
          .center {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            div:nth-child(1) {
              color: #1E1E1E;
              font-size: 13px;
              height: 14px;
              line-height: 14px;
              display: flex;
              align-items: center;
              p {
                font-size: 9px;
                width: 35px;
                height: 100%;
                display: flex;
                color: #ffffff;
                align-items: center;
                justify-content: center;
                background: linear-gradient(to right, #FF7306 0%,#FF3550 100%);
                border-radius: 3px;
                margin-right: 4px;
              }
              .quan {
                background:#999999
              }
            }
            div:nth-child(2) {
              color: #999999;
              font-size: 11px;
              height: 11px;
              line-height: 11px;
              font-weight: 400;
            }
            div:nth-child(3) {
              color: #979797;
              font-size: 10px;
              letter-spacing:0.5px
            }
          }
          .right {
            color: #979797;
            font-size: 14px;
            display: flex;
            align-items: center;
            .chioce {
              width: 18px;
              height: 18px;
              border: 2px solid #E2E2E2;
              border-radius: 50%;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                margin-top: 2px;
                width: 12px;
                height: 12px;
              }
            }
            .active {
              border: none;
              background: #FFDD07;
              transition: all 0.3s;
            }
          }

        }

      }
      .detailInfo {
        overflow: hidden;
        width: 100%;
        // height: 65px;
        background: #ffffff;
        margin-top: -3px;
        position: relative;
        z-index: 0.1;
        color: #666666;
        line-height: 18px;
        font-size: 11px;
        // box-shadow:inset 0px 15px 10px -15px rgba(201,201,201,0.22);
        p {
          padding: 16px;

        }
      }
    }
  }
.unusable {
  .title {
    font-size: 14px;
    font-weight: 600;
    margin: 17px 3px 15px;
  }
}
.shopp{
  height: 80px;
}
.footer {
  max-width: 10rem;
  border-top: 0.5px solid #f3f3f3;
  height: 64px;
  width: 100%;
  position: fixed;
  z-index: 100;
  background: #FFFFFF;
  bottom: 0;
  display: flex;
  padding: 0 12px 0 15px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .left {
    font-size: 15px;
    span {
      color: #FF3432;
    }
    span:nth-child(1) {
      font-size: 10px;
      margin: 0 2px;
    }
  }
  .right {
    .submit {
      font-weight: 800;
      width: 130px;
      height: 46px;
      border-radius: 25px;
      color: #2F2F2F!important;
    }
  }
}
</style>
